<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui'

import {Button, message, Space} from 'ant-design-vue'

import { useVbenForm } from '#/adapter/form'
import {editPurchaseDetail} from "#/api/goodsPurchaseProgress";
import {useUserStore} from "@vben/stores";
import {ref} from "vue";

const emit = defineEmits(['fetchData'])
const userStore = useUserStore()
const [BaseForm, baseFormApi] = useVbenForm({
  showDefaultActions: false,
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  layout: 'horizontal',
  schema: [
    { component: 'Textarea', fieldName: 'delivery_feedback', label: '请输入',componentProps:{ rows:10,placeholder:"请输入"} },
  ],
  wrapperClass: 'grid-cols-1',
})
const  view =ref(true)
const [Modal, modalApi] = useVbenModal({
  destroyOnClose: true,
  class: 'w-[30%]',
  appendToMain: true,
  fullscreenButton: false,
  onCancel() {
    modalApi.close()
    emit('fetchData')
  },
  onConfirm: async () => {
    await baseFormApi.validateAndSubmitForm()
  },
  onOpenChange: async (isOpen: boolean) => {
    if (isOpen) {
      const { info, isEdit } = modalApi.getData<Record<string, any>>()
      await baseFormApi.setValues(info, false)
      view.value = isEdit
    }
  },
})
async function  save(){
  const values = await baseFormApi.getValues()
  editPurchaseDetail({
    goods_purchase_detail_id: values.id,
    delivery_feedback: values.delivery_feedback,
  }).then((res) => {
    message.success('保存成功')
    emit('fetchData')
    modalApi.close()
  })
}
</script>

<template>
  <Modal title="跟单交期反馈">
    <BaseForm />
    <template #footer>
      <div class="flex justify-end">
        <Space>
          <Button @click="modalApi.close()">取消</Button>
          <Button @click="save()" type="primary" v-if="userStore.userInfo.role_ids.includes(6) && view ">确定</Button>
        </Space>
      </div>
    </template>
  </Modal>
</template>

<style scoped></style>
